<!DOCTYPE html>
<!--
一般数据采用的固定的静态数据类型，而SQLite采用的是动态数据类型，会根据存入值自动判断。SQLite具有以下五种数据类型：

1.NULL：空值。
2.INTEGER：带符号的整型，具体取决有存入数字的范围大小。
3.REAL：浮点数字，存储为8-byte IEEE浮点数。
4.TEXT：字符串文本。
5.BLOB：二进制对象。


但实际上，sqlite3也接受如下的数据类型：
 smallint 16 位元的整数。
 interger 32 位元的整数。
 decimal(p,s) p 精确值和 s 大小的十进位整数，精确值p是指全部有几个数(digits)大小值，s是指小数点後有几位数。如果没有特别指定，则系统会设为 p=5; s=0 。
 float  32位元的实数。
 double  64位元的实数。
 char(n)  n 长度的字串，n不能超过 254。
 varchar(n) 长度不固定且其最大长度为 n 的字串，n不能超过 4000。
 graphic(n) 和 char(n) 一样，不过其单位是两个字元 double-bytes， n不能超过127。这个形态是为了支援两个字元长度的字体，例如中文字。
 vargraphic(n) 可变长度且其最大长度为 n 的双字元字串，n不能超过 2000
 date  包含了 年份、月份、日期。
 time  包含了 小时、分钟、秒。
 timestamp 包含了 年、月、日、时、分、秒、千分之一秒。

datetime 包含日期时间格式，必须写成'2010-08-05'不能写为'2010-8-5'，否则在读取时会产生错误！
-->
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <meta name="format-detection" content="telephone=no" />
        <!--<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />-->
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" type="text/css" href="css/website.css" />
		<script src="http://001-PC:8081/target/target-script-min.js#anonymous"></script>
        <title>Storage Example</title>
    </head>
    <body>
    	<div id="main" data-role="page"> 
	        <div>
	            <h3>Phonegap Storage Example</h3>
	            <div>
	            	<div class="ui-grid-b">
						<div class="ui-block-a"><a id="createBtn" data-role="button" data-theme="b"  data-mini="true">创建数据</a></div>
						<div class="ui-block-b"><a id="DropBtn" data-role="button" data-theme="b"  data-mini="true">删除表</a></div>
						<div class="ui-block-c"><a id="selectBtn" data-role="button" data-theme="b"  data-mini="true">查询</a></div>
						
						<div class="ui-block-a"><a id="insertBtn" data-role="button" data-theme="b"  data-mini="true">新增记录</a></div>
						<div class="ui-block-b"><a id="deleteBtn" data-role="button" data-theme="b"  data-mini="true">删除全部记录</a></div>
					</div>
	            </div>
	            
	            <div>
	            	<table id="resultList" border=0 width="300px">
	            		<thead>查询结果</thead>
	            		<tbody></tbody>
	            	</table>
	            </div>
	            
	        </div>
	        
	        <div data-role="popup" id="addWindow" data-overlay-theme="a" data-theme="c" style="max-width:400px;" class="ui-corner-all">
		        <div data-role="header" data-theme="b" class="ui-corner-top">
					<h1>新增</h1>
				</div>
				<div id="msgdiv" style="color:#0066FF"></div>
				<div data-role="content" data-theme="d" class="ui-corner-bottom ui-content">
					<label>ID:</label>
					<input type="text" name="name" id="idfield" value="" />
					<label>DATA:</label>
					<input type="text" name="name" id="datafield" value="" />
					
					<a id="saveBtn" href="#" data-role="button" data-inline="true" data-transition="flow" data-theme="b">保存</a>
					<a href="#" data-role="button" data-inline="true" data-rel="back" data-theme="c">关闭</a>  
				</div>				
			</div>
        </div> 
        <script type="text/javascript" charset="utf-8" src="cordova.js"></script>
        <script type="text/javascript" charset="utf-8" src="js/jquery.js"></script>
        <script type="text/javascript" charset="utf-8" src="js/jquery.mobile-1.2.0.min.js"></script>
        <script type="text/javascript">
					(function(){
					$('#main').live('pageshow',function(){
						
						$('#createBtn').bind('click',function(){
							create('test','1.0','testDb',1000000);
						});
						
						$('#DropBtn').bind('click',function(){
							dropTable('DEMO','test','1.0','testDb',1000000);
						});
						
						$('#selectBtn').bind('click',function(){
							select('test','1.0','testDb',1000000);
						});
						
						$('#insertBtn').bind('click',function(){
							$('#addWindow').popup('open');
						});
						
						$('#saveBtn').bind('click',onSaveBtnClick);
						
						$('#deleteBtn').bind('click',onDeleteBtnClick);
					});
					
					function onSaveBtnClick(){
						var id = $('#idfield').val();
						var data = $('#datafield').val();
						if(id!=''&& data!=''){
							var db = getDb('test','1.0','testDb',1000000);
							db.transaction(function(tx){
								tx.executeSql('INSERT INTO DEMO (id, data) VALUES (?, ?)', [id,data]);				
							}, errorCB, function(){
								$('#addWindow').popup('close');
								alert('新增成功');
								$('#selectBtn').trigger('click');
								$('#msgdiv').empty();
								$('#idfield').val('');
								$('#datafield').val('');
							});
						}else{
							$('#msgdiv').text('请输入id和data!!');
						}
					}
					
					function onDeleteBtnClick(){
						var db = getDb('test','1.0','testDb',1000000);
						db.transaction(function(tx){
							tx.executeSql('DELETE FROM DEMO');				
						}, errorCB, function(){
							alert('成功删除全部记录!');
							$('#resultList > tbody').empty();
						});
					}

					function getDb(dbName,dbVersion,dbDisplayname,dbSize){
						return window.openDatabase(dbName, dbVersion,dbDisplayname, dbSize);
					}
					
					function select(dbName,dbVersion,dbDisplayname,dbSize){
						var db = getDb(dbName,dbVersion,dbDisplayname,dbSize);
						db.transaction(queryDB, errorCB);        		
					}
					
					function dropTable(tableName,dbName,dbVersion,dbDisplayname,dbSize){
						var db = getDb(dbName,dbVersion,dbDisplayname,dbSize);
						db.transaction(function(tx){
							tx.executeSql('DROP TABLE IF EXISTS '+tableName);			
						}, errorCB,function(){
							alert('删除成功,tableName='+tableName);
							$('#resultList > tbody').empty();
						}); 
					}
					
					function queryDB(tx) {
						$('#resultList > tbody').empty();
						tx.executeSql('SELECT * FROM DEMO', [], function (tx, results) {
							var len = results.rows.length;
							var html = [];
							for (var i=0; i<len; i++){
								var rs = results.rows.item(i);
								html.push('<tr style="background:#ccc;color:#0066FF;"><td>'+rs.id+'</td><td>'+rs.data+'</td></tr>');
							}
							$('#resultList > tbody').append($(html.join('')));
						},errorCB);
					}
					
					
					
					function create(dbName,dbVersion,dbDisplayname,dbSize){
						var db = getDb(dbName,dbVersion,dbDisplayname,dbSize);
						db.transaction(function(tx){
								tx.executeSql('DROP TABLE IF EXISTS DEMO');
								tx.executeSql('CREATE TABLE IF NOT EXISTS DEMO (id unique, data)');
								tx.executeSql('INSERT INTO DEMO (id, data) VALUES (1, "First row")');
								tx.executeSql('INSERT INTO DEMO (id, data) VALUES (2, "Second row")');
								tx.executeSql('INSERT INTO DEMO (id, data) VALUES (3, "Phonegap sqlite测试")');
							}, errorCB, function(){
								alert('创建成功,dbName='+dbName);
								$('#selectBtn').trigger('click');
							});
					}
					function errorCB(err) {
						alert("Error processing SQL: "+err.code);
					}
				})();
		</script>
    </body>
</html>
